<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>修改密码 - 网上跳蚤市场</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" th:href="@{/css/style.css}" />
</head>
<body>
<div th:replace="layout :: .nav"></div>
<div class="container">
    <section>
        <h2>修改密码</h2>

        <div class="card">
            <div id="passwordForm" class="password-form">
                <div class="form-group">
                    <label for="oldPassword">原密码:</label>
                    <input type="password" id="oldPassword" name="oldPassword" required>
                </div>
                <div class="form-group">
                    <label for="newPassword">新密码:</label>
                    <input type="password" id="newPassword" name="newPassword" required>
                </div>
                <div class="form-group">
                    <label for="confirmPassword">确认新密码:</label>
                    <input type="password" id="confirmPassword" name="confirmPassword" required>
                </div>
                <button id="submitBtn" class="btn">确认修改</button>
            </div>
        </div>

        <div id="msg"></div>
    </section>
</div>
<script>
    document.getElementById('submitBtn').addEventListener('click', async function() {
        const oldPassword = document.getElementById('oldPassword').value;
        const newPassword = document.getElementById('newPassword').value;
        const confirmPassword = document.getElementById('confirmPassword').value;

        if (!oldPassword || !newPassword || !confirmPassword) {
            document.getElementById('msg').innerHTML = '<div class="error-msg">请填写所有字段</div>';
            return;
        }

        if (newPassword !== confirmPassword) {
            document.getElementById('msg').innerHTML = '<div class="error-msg">新密码与确认密码不匹配</div>';
            return;
        }

        try {
            const response = await fetch('/api/users/update-password', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                credentials: 'include',
                body: JSON.stringify({
                    oldPassword,
                    newPassword,
                    confirmPassword
                })
            });

            const result = await response.json();

            if (result.error) {
                document.getElementById('msg').innerHTML = `<div class="error-msg">${result.error}</div>`;
            } else {
                document.getElementById('msg').innerHTML = `<div class="success-msg">${result.msg}</div>`;
                // 清空表单
                document.getElementById('oldPassword').value = '';
                document.getElementById('newPassword').value = '';
                document.getElementById('confirmPassword').value = '';
            }
        } catch (error) {
            document.getElementById('msg').innerHTML = `<div class="error-msg">发生错误: ${error.message}</div>`;
        }
    });
</script>
<style>
    .password-form {
        max-width: 400px;
        margin: 0 auto;
        padding: 20px;
    }
</style>
</body>
</html>